@extends('client/layoutIndex')

@section('link')
    <link href="{{ asset('client/css/cart.css') }}" rel="stylesheet">
@stop
@section('content')
    <span id="msg" style="display: none">
        @if (count($errors) > 0)
            @foreach ($errors->all() as $error)
                <div style="width: 100%;">
                    <span style="color: red;display: block;margin: 0px auto;width: 200px;text-align: center;">{{ $error }}</span>
                </div>
            @endforeach
        @endif
    </span>
    <script type="text/javascript">
        var _msg = $('#msg div span').text();
        console.log(_msg);
        if(_msg != ''){
            layer.msg(_msg);
        }
    </script>
    <div style="background:#f5f5f5;padding-top:10px;height:auto;">
        <div class="cart">
            <div class="step" style="margin-left:30px;">
                <div style="width:30px;height:30px;border-radius:20px;background:#fdb713;
        color:#fff;text-align:center;line-height:30px;float:fixed;position:relative;">
                    1</div>
                <span style="width:100px;height:3px;background:#fdb713;display:block;
        margin-left:20px;margin-top:-15px;"></span>
                <div style="width:30px;height:30px;border-radius:20px;background:#ccc;
        color:grey;text-align:center;line-height:30px;float:fixed;position:relative;
        margin-left:120px;margin-top:-15px;">2</div>
                <span style="width:100px;height:3px;background:#ccc;display:block;
        margin-left:140px;margin-top:-17px;"></span>
                <div style="width:30px;height:30px;border-radius:20px;background:#ccc;
        color:grey;text-align:center;line-height:30px;float:fixed;position:relative;
        margin-left:240px;margin-top:-17px;">3</div>
                <span class="font blue" style="margin-left:-15px;"><em>购物车</em></span>
                <span class="line grey"></span>
                <span class="font grey" style="margin-left:65px;"><em>订单信息</em></span>
                <span class="line grey"></span>
                <span class="font grey" style="margin-left:65px;"><em>购物成功</em></span>
                <span class="line grey"></span>
            </div>
            <form action="{{ url('client/toOrders') }}" method="post" enctype="multipart/form-data">
                {{csrf_field()}}
                <div class="tit" style="margin-top:30px;">
                    <h3 style="font-weight:bold;">购物车</h3>
                    <span></span>
                    <img src="{{ asset('client/image/xvxian.png') }}">
                </div>
                <table  class="cart-table" id="table">
                    <thead>
                    <tr style="height:40px;">
                        <th width="8%">商品勾选</th>
                        <th width="40%">商品信息</th>
                        <th width="10%">单价</th>
                        <th width="10%">数量</th>
                        <th width="10%">金额</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody class="cart-order">
                    @if(!empty($list))
                        @foreach ($list as $key => $value)
                            <tr>
                                <td><input type="checkbox" name='check_cart[]' value="{{ $value['id'] }}"></td>
                                <td class="t-p">
                                    <div style="margin-left: 30px;">
                                        <div style="float: left">
                                            <img src="/productImg/{{ $value['pic'] }}" width="150" class="img-rounded">
                                        </div>
                                        <div style="float: left;margin-left: 30px;">
                                            <div>
                                                <span style="font-size: 25px;">商品名称{!! $value['goods_name'] !!}</span>
                                            </div>
                                            <div>
                                                <span>商品简介{!! $value['introduce'] !!}</span>
                                            </div>

                                        </div>
                                    </div>


                                </td>
                                <td class="price">{!! $value['goods_price'] !!}</td>
                                <td>
                                    <div class="wrap-input">
                                        <a class="btn-reduce" href="javascript:;" onclick="minusSub(this);"><i
                                                    class="fa fa-angle-down">-</i></a>
                                        <a class="btn-add" href="javascript:;" onclick="addSub(this)"><i class="fa fa-angle-up">+</i></a>
                                        <input type="text" name="number[{{ $value['id'] }}]" class="buy-num"
                                               value="{!! $value['goods_num'] !!}" readonly min="0" max="{{ $value['goods_inve'] }}">
                                    </div>
                                </td>
                                <td class="t-total">{!! $value['goods_price'] * $value['goods_num'] !!}</td>
                                <td class="t-operate">
                                    {{--<a>加入收藏夹</a>--}}
                                    <a href="{{ url('client/delCart/'.$value['id']) }}" class="btn btn-warning" style="width:40%;margin:auto;">删除</a>

                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6">
                                <a href="{{ url('/') }}">去购物</a>
                            </td>
                        </tr>
                    @endif
                    </tbody>
                    <tbody class="cart-statement">
                    <tr>
                        <td colspan="7">
                            <div class="statement-l">
                                <div class="checkbox">
                                    <label style="padding-top:12px;">
                                        <input type="checkbox" class="checkAll"> 全选
                                    </label>
                                </div>
                                {{--<a>批量删除</a>--}}
                                {{--<a>批量加入收藏夹</a>--}}
                            </div>
                            <div class="statement-r">
                                <span>应付金额（不含运费）：￥<b id="money">0</b></span>
                                <input type="hidden" name="total_price" id="total_price" value="0">
                                <a><input type="submit" value="去&nbsp;结&nbsp;算" style="background: none;border:none; width: 100%;font-weight:bold;"/></a>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                {{--{!! Form::close() !!}--}}
                </table>
                <script>


                    // 数量增加
                    function addSub(obj) {
                        var total =  $(obj).parent().find('.buy-num');
                        var v2 = parseInt(total.val());  //购买数
                        var num = total.attr('max');   //库存
                        if (v2 < num) {
                            v2++;
                            $(obj).parent().find('.buy-num').val(v2);
                        } else {
                            alert('亲，您买的太多了，给别顾客留点吧！');
                        }
                    }

                    // 数量减少
                    function minusSub(obj) {
                        var v1 = parseInt($(obj).parent().find('.buy-num').val());
                        if (v1 > 1) {
                            v1--;
                            $(obj).parent().find('.buy-num').val(v1);
                        } else {
                            alert('最少也要买一件哦~');
                        }
                    }

                    //全选
                    $(".checkAll").click(function () {
                        if (this.checked) {
                            $(this).attr("checked", "checked");
                            $("input[name='check_cart[]']").each(function () {
                                this.checked = true;
                            });
                        } else {
                            $(this).removeAttr("checked");
                            $("input[name='check_cart[]']").each(function () {
                                this.checked = false;
                            });
                        }
                    });

                    //商品价格小计
                    $('.btn-reduce').click(function () {
                        $num = parseInt($(this).parent().find('.buy-num').val());
                        $price = $(this).parent().parent().parent().find('.price').text();
                        $subtotal = ($num * $price).toString();
                        $dot = $subtotal.indexOf('.');
                        if($dot > 0) {
                            $subtotal = $subtotal.substring(0, $dot + 3);
                        }
                        $(this).parent().parent().parent().find('.t-total').html($subtotal);
                        $(":checkbox").removeAttr("checked");
                    })
                    $('.btn-add').click(function () {
                        $num = parseInt($(this).parent().find('.buy-num').val());
                        $price = $(this).parent().parent().parent().find('.price').text();
                        $subtotal = ($num * $price).toString();
                        $dot = $subtotal.indexOf('.');
                        if($dot > 0) {
                            $subtotal = $subtotal.substring(0, $dot + 3);
                        }
                        $(this).parent().parent().parent().find('.t-total').html($subtotal);
                        $(":checkbox").removeAttr("checked");
                    })

                    //获取当前页面选中商品数量及价格
                    $(":checkbox").click(function () {
                        var s = 0;
                        var n = 0;
                        $("input[name='check_cart[]']:checked").each(function () {
                            var text = $(this).parent().parent().find('td[class*=t-total]').text();
                            s += parseFloat(text);
                            var all = $(this).parent().parent().find('td:eq(4)>div>input[class*=buy-num]').val();
                            n += parseFloat(all);
                        });
                        $("#money").html(s.toFixed(2));
                        $("#total_price").val(s.toFixed(2));
                        $("#count").html(n);
                    });
                </script>
            </form>
        </div>
    </div>
@stop